<template>
    <div class="home-page">
    <div class="top">
      <div class="top-tools">
        <div class="header">
          <div class="add" @click="show=true"><img src="../assets/images/home_icon_add.png" alt="" /></div>
          <router-link tag="div" to="/search" class="search"><span>搜索菜谱</span></router-link>
          <router-link tag="div" to="/basket" class="car"><img src="../assets/images/home_shop_top.png" alt="" /></router-link>
        </div>
      </div>
    </div>
    <div class="context">
      <div class="top-list">
        <ul class="tap">
          <router-link :to="'/novice?id='+253200882" tag="li">
            <div class="img"><img src="../assets/images/4.png" alt="" /></div>
            <span>新手菜谱</span>
          </router-link>
          <router-link to="/categorize" tag="li">
            <div class="img"><img src="../assets/images/1.png" alt="" /></div>
            <span>菜谱分类</span>
          </router-link>
          <router-link tag="li" to="/ranking">
            <div class="img"><img src="../assets/images/2.png" alt="" /></div>
            <span>排行榜</span>
          </router-link>
          <router-link tag="li" to="/sign">
            <div class="img"><img src="../assets/images/3.png" alt="" /></div>
            <span>签到奖励</span>
          </router-link>
        </ul>
      </div>
      <div class="context-tap">
        <div class="c-list">
          <van-tabs @click="onClick" >
            <van-tab v-for="(item) in navList" :title="item.title" :key="item.id" :title-class="['list-item', {'active':navId==item.id}]" ></van-tab>
        </van-tabs>
          <!-- <div :class="['list-item', {'active':navId==item.id}]" v-for="(item) in navList" :key="item.id" @click="check(item.id)">{{item.title}}</div> -->
        </div>
        <!-- <div class="tap-add-img">
          <img src="../assets/images/home_tab_add.png" alt="" />
        </div> -->
      </div>
      <div class="tablist" v-if="hasTab">
        <ul>
          <li v-for="(item,index) in tablist" :key="item.id" :class="{'active':index==tabIndex}" @click="selectHot(item.id,index)">{{item.title}}</li>
        </ul>
      </div>
      <div class="meal-list">
            <!-- <van-loading type="spinner" v-if="!showMeal" />   -->
            <meal-lists  :home-list="HomeList"  v-if="showMeal"></meal-lists>
      </div>
    </div>
    <bottom-tab :index=0></bottom-tab>
    <van-popup
      v-model="show"
      closeable
      round
      position="bottom"
      :style="{ height: '30%' }"
    >
    <div class="cpCon">
      <div class="cptitle">创建菜谱</div>
      <div class="cp">
        <div class="picCp" @click="showPic=true">
          <img src="../assets/images/btn_upload_pic.png" alt="">
        </div>
        <div class="videoCp">
          <img src="../assets/images/btn_upload_video.png" alt="">
        </div>
      </div>
      <div class="drag" @click="showDraft=true">
        <img src="../assets/images/dialog_btn_drag_iv.png" alt="">
      </div>
    </div>
    </van-popup>
    <van-popup v-model="showPic" position="bottom" :style="{ height: '100%' }" >
      <div class="pictop">
        <div class="picleft" @click="picback">
          <van-icon name="arrow-left" size="20" />
        </div>
        <div class="picmid">创建菜谱</div>
        <div class="picright" @click="saveCp">保存</div>
      </div>
      <div style="height:40px"></div>
      <div class="picContent">
        <div class="bgpic">
          <van-uploader v-model="fileList" :preview-image="false" :after-read="afterRead">
              <img class="emptyImg" v-if="bgimg==null" src="../assets/images/cp_bg.png" alt="">
            <div class="fullImg" v-else :style="{'background-image': 'url(blob:http://localhost:8080/'+bgimg+')',}" ></div>
          </van-uploader>
        </div>
        <div class="cpname">
          <div class="cpntitle">名称</div>
          <input type="text" class="cpnInp" v-model="name" placeholder="您的菜谱名称">
        </div>
        <div class="cpname">
          <div class="cpntitle">简介</div>
          <textarea class="cparea" cols="30" rows="3" v-model="recommend" placeholder="说说这道菜背后的故事"></textarea>
        </div>
        <div class="cpname">
          <div class="cpntitle">用料</div>
          <div class="materia">
            <div class="materiaItem" v-for="ordernum in materialist.length" :key="ordernum">
              <div class="leftInp">
                <input type="text" v-model="materialist[ordernum-1].name" placeholder="用料,如虾仁">
              </div>
              <div class="rightInp">
                <input type="text" v-model="materialist[ordernum-1].dosage" placeholder="用量,如250g">
              </div>
            </div>
          </div>
          <div class="addline">
            <div class="addbtn" @click="addmaterialine">
              <img src="../assets/images/加号_o.png" alt="">再增加一行
            </div>
            <div class="delbtn" v-if="materialist.length>1" @click="removemaerialine">
              <img src="../assets/images/减号.png" alt="">删除一行
            </div>
          </div>
        </div>
        <div class="cpname">
          <div class="cpntitle">做法</div>
          <div class="step">
            <div class="stepItem" v-for="ordernum in steplist.length" :key="ordernum">
              <div class="stepNum">步骤{{ordernum}}</div>
              <div class="stepPic">
                <van-uploader v-model="fileList" :preview-image="false" :after-read="afterStep">
                  <img class="emptyImg" v-if="steplist[ordernum-1].imageid==null" src="../assets/images/cp_bg_bz.png" alt="">
                  <div class="fullImg" v-if="steplist[ordernum-1].imageid!=null"  :style="{'background-image': 'url(blob:http://localhost:8080/'+steplist[ordernum-1].imageid+')',}" ></div>
                </van-uploader>
              </div>
              <div class="steptext">
                <input type="text" class="cpnInp" v-model="steplist[ordernum-1].details" placeholder="说说您的菜谱步骤说明">
              </div>
            </div>
          </div>
          <div class="addline">
            <div class="addbtn" @click="addstepline">
              <img src="../assets/images/加号_o.png" alt="">再增加一行
            </div>
            <div class="delbtn" v-if="steplist.length>1" @click="removestepline">
              <img src="../assets/images/减号.png" alt="">删除一行
            </div>
          </div>
        </div>
        <div class="cpname">
          <div class="cpntitle">小贴士</div>
          <textarea class="cparea" cols="30" rows="4" v-model="tips" placeholder="这道菜有哪些技巧，注意事项？"></textarea>
        </div>
        <div class="publish" @click="publish">发布菜谱</div>
      </div>
    </van-popup>
    <van-popup v-model="showDraft" position="right" :style="{ height: '100%',width:'100%' }" >
      <div class="drafttop">
        <van-icon name="cross" size="24px" @click="showDraft=false" />
        <div class="draftTitle">草稿箱</div>
        <div style="width:24px"></div>
      </div>
      <div style="height:40px"></div>
      <div class="draftCon">
        <div class="draftItem" v-for="item in draftlist" :key="item.id" @click="toCp(item.id)">
          <div class="draftImg" v-if="item.imageid!=null" :style="{'background-image': 'url(blob:http://localhost:8080/'+item.imageid+')',}" ></div>
          <div class="emptyDraft" v-else></div>
          <div class="draftInfo">
            <div class="draftname one-txt-cut">{{item.name}}</div>
            <div class="addtime">{{item.id | time}}</div>
            <div class="draftbottom">
              <div class="type">图文菜谱</div>
              <van-icon name="delete-o" size="17px" @click.stop="delDraft(item.id)" />
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import MealLists from '../components/MealLists.vue'
import BottomTab from "../components/BottomTab.vue"
import {getRecommendData,getRecipeListByTypeData,getContentsBySubClassidData,getCategoryData} from '../api/home'
export default {
    data() {
        return {
            navList:[
                {
                    id:111,
                    title:'今日推荐',
                    hasTab:false
                },
                {
                    id:'latest',
                    title:'最新',
                    hasTab:false
                },
                {
                    id:'hotest',
                    title:'热门',
                    hasTab:false
                },
                {
                    id:7136536,
                    title:'家常菜',
                    hasTab:true
                },
                {
                    id:257354226,
                    title:'烘焙',
                    hasTab:true
                },
                {
                    id:257353790,
                    title:'宝宝辅食',
                    hasTab:true
                },
                {
                    id:7136465,
                    title:'早餐',
                    hasTab:true
                },
                {
                    id:257354383,
                    title:'食疗养生',
                    hasTab:true
                },
                
            ],//导航栏数据
            tablist:[
              {
                id:'0',
                title:'综合'
              },
              {
                id:'1',
                title:'今日热门'
              },
              {
                id:'7',
                title:'本周热门'
              },
              {
                id:'30',
                title:'月度热门'
              },
            ],
            navId:111,//当前导航栏
            HomeList:null,//数据列表
            showMeal:false,//菜谱列表组件显示
            checkId:null,
            tabIndex:0,
            hasTab:false,//是否存在二级导航栏
            size:100,//菜谱列表数量
            idlist:[],//存储当前导航栏ID
            idIndex:null,
            categorylist:[],
            show:false,//发布菜谱界面显示
            showPic:false,//创建菜谱界面显示
            fileList:[],
            showEmpty:true,//显示封面预览图
            bgimg:null,//封面预览图
            materialine:1,//用料行数
            stepline:1,//步骤行数
            name:null,//菜谱名称
            recommend:null,//菜谱简介
            materialist:[
              {
                contentid:null,
                cookbookName:null,
                mwikipediaid:'',
                dosage:null,
                id:null,
                name:null,
                ordernum:1,
              }
            ],//用料数据
            steplist:[
              {
                contentid:null,
                details:null,
                id:null,
                imageid:null,
                ordernum:1,
                time:0,
              }
            ],//步骤数据
            tips:null,
            works:[],//菜谱作品
            draftlist:[],//草稿
            showDraft:false,//显示草稿
        }
    },
    methods: {
        // 获取今日推荐数据
        getHomeRecommendData(size){
          getRecommendData(size).then(data=>{
            // console.log(data);
            if (data) {
              this.showMeal=true
              window.localStorage.setItem("RecommendData",JSON.stringify(data.data))
            }
            this.HomeList=data.data
            this.restartCollectNum(this.HomeList)
          })
        },
        //获取最新，热门数据
        getHomeRecipeListData(type,size){
          getRecipeListByTypeData(type,size).then(data=>{
            // console.log(data);
            if (data) {
              this.showMeal=true
              window.localStorage.setItem("RecipeListData",JSON.stringify(data.list))
            }
            this.HomeList=data.list
            if (type=='latest') {
              let myworks = JSON.parse(window.localStorage.getItem("works"))
              if (myworks) {
                let temp = []
                let userId = window.localStorage.getItem("userId");
                myworks.forEach(item=>{
                  temp.push({
                    authorid:userId,
                    authorimageid:'8877665544',
                    authorname:'吴伟龙',
                    id:item.id,
                    imageid:item.imageid,
                    name:item.name,
                    collectCount:'0',
                  })
                })
                this.HomeList = [...temp,...this.HomeList]
              }
            }
            // console.log(this.HomeList);
            this.restartCollectNum(this.HomeList)
          })
        },
        //获取其他类型数据
        getHomeContentsBySubClassidData(id,size){
          getContentsBySubClassidData(id,size).then(data=>{
            // console.log(data);
            if (data) {
              this.showMeal=true
              let index = this.categorylist.findIndex(item=>item.id==this.navId)
              if (index==-1) {
                this.categorylist.push({
                  id:this.navId,
                  data:data.list
                })
                window.localStorage.setItem("SubClassidData",JSON.stringify(this.categorylist))
              }
            }
            this.HomeList=data.list
            this.restartCollectNum(this.HomeList)
          })
        },
        //获取其他类型分类数据
        getCategoryListData(id,typeId,size){
          getCategoryData(id,typeId,size).then(data=>{
            // console.log(data);
            if (data) {
              this.showMeal=true
            }
            this.HomeList=data.data
            this.restartCollectNum(this.HomeList)
          })
        },
        // 传递id、tab栏切换
        onClick(name) {
            // console.log(this.HomeList);   
            this.tabIndex = 0        
            this.navId=this.navList[name].id
            this.hasTab = this.navList[name].hasTab
            window.localStorage.setItem('id',this.navId)
            //将数据存入本地防止多次请求
            let index = this.idlist.findIndex(item=>item==this.navList[name].id)
            this.idIndex = index
            if (index==-1) {
              this.idlist.push((this.navList[name].id))
              window.localStorage.setItem('idlist',JSON.stringify(this.idlist))
              window.localStorage.setItem("homedata",JSON.stringify(this.HomeList))
              if (this.navList[name].id===111) {
                this.getHomeRecommendData(this.size)
              }else if(this.navList[name].id=='latest' || this.navList[name].id=='hotest'){
                this.getHomeRecipeListData(this.navList[name].id,this.size)
              }else{
                this.getHomeContentsBySubClassidData(this.navList[name].id,this.size)
              }
            }else{
              let homedata = JSON.parse(window.localStorage.getItem("homedata"))
              this.HomeList = homedata
              
              if (this.navList[name].id===111) {
                let homedata = JSON.parse(window.localStorage.getItem("RecommendData"))
                this.restartCollectNum(homedata)
                this.HomeList = homedata
                setTimeout(() => {
                  this.showMeal = true
                }, 200);
              }else if(this.navList[name].id=='latest' || this.navList[name].id=='hotest'){
                let homedata = JSON.parse(window.localStorage.getItem("RecipeListData"))
                this.restartCollectNum(homedata)
                this.HomeList = homedata
                
                setTimeout(() => {
                  this.showMeal = true
                }, 200);
              }else{
                let homedata = JSON.parse(window.localStorage.getItem("SubClassidData"))
                let i = homedata.findIndex(item=>item.id==this.navList[name].id)
                this.restartCollectNum(homedata[i].data)
                this.HomeList = homedata[i].data
                
                setTimeout(() => {
                  this.showMeal = true
                }, 200);
              }
            }
            
        },
        selectHot(id,index){
          // console.log(id);
          this.navId=window.localStorage.getItem('id')
          this.tabIndex = index
          if (id!='0') {
            this.getCategoryListData(this.navId,id,this.size)
          }else{
            if (this.idIndex==-1) {
              this.getHomeContentsBySubClassidData(this.navId,this.size)           
            }else{
                let homedata = JSON.parse(window.localStorage.getItem("SubClassidData"))
                let i = homedata.findIndex(item=>item.id==this.navId)
                this.restartCollectNum(homedata[i].data)
                this.HomeList = homedata[i].data
                
                setTimeout(() => {
                  this.showMeal = true
                }, 200);
            }
          }
        },
        //重置收藏数量
        restartCollectNum(arr){
          let tempCollectList = JSON.parse(window.localStorage.getItem("collectList"))
          if (tempCollectList) {
            arr.forEach(item=>{
              tempCollectList.forEach(k=>{
                if (item.id==k.id) {
                  item.collectCount=Number(item.collectCount) + 1
                }
              })
            })
          }
        },
        //封面图
        afterRead(file) {
          // 此时可以自行将文件上传至服务器
          // console.log(file);
          let fileObj = this.base64ImgtoFile(file.content)
          let bg = window.webkitURL.createObjectURL(fileObj) || window.URL.createObjectURL(fileObj)
          this.bgimg = bg.split("/")[3]
          this.showEmpty = false
        },
        //步骤图
        afterStep(file){
          // console.log(file);
          let fileObj = this.base64ImgtoFile(file.content)
          let imgs = window.webkitURL.createObjectURL(fileObj) || window.URL.createObjectURL(fileObj)
          this.steplist[this.stepline-1].imageid = imgs.split("/")[3]
        },
        //增加用料行数
        addmaterialine(){
          this.materialine = this.materialine+1
          this.materialist.push({
                contentid:null,
                dosage:null,
                id:null,
                name:null,
                ordernum:this.materialine,
          })
        },
        //删除用料行
        removemaerialine(){
          this.materialist.pop()
          this.materialine = this.materialine-1
        },
        //增加步骤行数
        addstepline(){
          this.stepline = this.stepline +1
          this.steplist.push({
                contentid:null,
                details:null,
                id:null,
                imageid:null,
                ordernum:this.stepline,
                time:0,
          })
        },
        //删除步骤行数
        removestepline(){
          this.stepline = this.stepline -1
          this.steplist.pop()
        },
        //转URL
        base64ImgtoFile (dataurl, filename = 'file') {
            const arr = dataurl.split(',')
            const mime = arr[0].match(/:(.*?);/)[1]
            const suffix = mime.split('/')[1]
            const bstr = atob(arr[1])
            let n = bstr.length
            const u8arr = new Uint8Array(n)
            while (n--) {
              u8arr[n] = bstr.charCodeAt(n)
            }
            return new File([u8arr], `${filename}.${suffix}`, {
              type: mime
            })
        },
        //发布菜谱
        publish(){
          // console.log("封面图",this.bgimg);
          // console.log('菜谱名称',this.name);
          // console.log('简介',this.recommend);
          // console.log('用料',this.materialist);
          // console.log("步骤",this.steplist);
          // console.log("小贴士",this.tips);
          if (this.bgimg 
          && this.name
          && this.materialist[0].name 
          && this.materialist[0].dosage 
          && this.steplist[0].details 
          && this.steplist[0].imageid) {

            this.steplist.forEach((item,index)=>{
              item.contentid = item.contentid==null?String(Number(new Date().getTime())+Number(index)):item.contentid
              item.id = item.id==null?String(Number(new Date().getTime())+Number(index)):item.id
            })

            this.materialist.forEach((item,index)=>{
              item.contentid = item.contentid==null?String(Number(new Date().getTime())+Number(index)):item.contentid
              item.id = item.id==null?String(Number(new Date().getTime())+Number(index)):item.id
            })

            let userId = window.localStorage.getItem("userId");

            this.works.push({
              authorid:userId,
              authorimageid:'8877665544',
              authorname:'吴伟龙',
              description:this.recommend,
              gettime:new Date().getFullYear() + '年',
              hasVideo:false,
              id:String(new Date().getTime()),
              imageid:this.bgimg,
              materialList:this.materialist,
              name:this.name,
              stepList:this.steplist,
              tags:'',
              tipList:[
                {
                  contentid:String(Number(new Date().getTime())+1),
                  details:this.tips,
                  id:String(new Date().getTime()),
                  ordernum:0,
                }
              ],
              url:null,
              version:'1',
              video:null,
              videoInfo:null,
              videoRecipeList:[],
              info:{
                collectionCount:'0',
                comment:[],
                commentCount:0,
                id:String(new Date().getTime()),
                likeCount:0,
                viewnum:'0',
                work:[],
                workCount:'0',
              }
            })
            window.localStorage.setItem("works",JSON.stringify(this.works))
            // console.log(this.works);

            let latest = {
              authorid:userId,
              authorimageid:'8877665544',
              authorname:'吴伟龙',
              id:String(new Date().getTime()),
              imageid:this.bgimg,
              name:this.name,
              collectCount:'0',

            }

            this.HomeList.unshift(latest)

            this.bgimg = null,
            this.name = null,
            this.recommend = null,
            this.materialist=[
              {
                contentid:null,
                dosage:null,
                id:null,
                name:null,
                ordernum:1,
              }
            ],
            this.materialine = 1,
            this.steplist=[
              {
                contentid:null,
                details:null,
                id:null,
                imageid:null,
                ordernum:1,
                time:0,
              }
            ],
            this.stepline = 1,
            this.tips = null
            this.showPic = false
            this.show = false

            if (this.draftlist.length) {
              let index = this.draftlist.findIndex(item=>item.name==this.name)
              this.draftlist.splice(index,1)
              window.localStorage.setItem("draftlist",JSON.stringify(this.draftlist))
            }

          }else{
            console.log(this.HomeList);
            this.$toast("封面、菜谱名、用料步骤1没有填!")
          }
        },
        //保存草稿
        saveCp(){
          
          if (this.bgimg 
          && this.name
          ) {
            this.steplist.forEach((item,index)=>{
              item.contentid = String(Number(new Date().getTime())+Number(index))
              item.id = String(Number(new Date().getTime()))
            })

            this.materialist.forEach((item,index)=>{
              item.contentid = String(Number(new Date().getTime())+Number(index))
              item.id = String(Number(new Date().getTime()))
            })

            let userId = window.localStorage.getItem("userId");

            this.draftlist.push({
              authorid:userId,
              authorimageid:'8877665544',
              authorname:'吴伟龙',
              description:this.recommend,
              gettime:new Date().getFullYear() + '年',
              hasVideo:false,
              id:String(new Date().getTime()),
              imageid:this.bgimg,
              materialList:this.materialist,
              name:this.name,
              stepList:this.steplist,
              tags:'',
              tipList:[
                {
                  contentid:String(Number(new Date().getTime())+1),
                  details:this.tips,
                  id:String(new Date().getTime()),
                  ordernum:0,
                }
              ],
              url:null,
              version:'1',
              video:null,
              videoInfo:null,
              videoRecipeList:[],
              info:{
                collectionCount:'0',
                comment:[],
                commentCount:0,
                id:String(new Date().getTime()),
                likeCount:0,
                viewnum:'0',
                work:[],
                workCount:'0',
              }
            })
            
            //同名处理
            if (this.draftlist.length>1) {
              this.draftlist.forEach((item,index)=>{
              if (item.name==this.name) {
                this.draftlist.splice(index,1)
              }
            })
            }
            window.localStorage.setItem("draftlist",JSON.stringify(this.draftlist))
            this.bgimg = null,
            this.showEmpty = true,
            this.name = null,
            this.recommend = null,
            this.materialist=[
              {
                contentid:null,
                dosage:null,
                id:null,
                name:null,
                ordernum:1,
              }
            ],
            this.materialine = 1,
            this.steplist=[
              {
                contentid:null,
                details:null,
                id:null,
                imageid:null,
                ordernum:1,
                time:0,
              }
            ],
            this.stepline = 1,
            this.tips = null,
            this.showPic = false
            this.show = false
            this.$toast("已保存至草稿箱")
          }else{
            this.$toast("封面图、名称没有填!")
          }
        },
        //草稿箱进入创建菜谱页
        toCp(id){
          this.showPic = true
          this.showDraft = false
          let index = this.draftlist.findIndex(item=>item.id==id)
          let ml = this.draftlist[index].materialList.length
          let sl = this.draftlist[index].stepList.length
          this.bgimg = this.draftlist[index].imageid
          this.name = this.draftlist[index].name
          this.recommend = this.draftlist[index].description
          this.materialist = this.draftlist[index].materialList
          this.steplist = this.draftlist[index].stepList
          this.tips = this.draftlist[index].tipList[0].details
          this.materialine = ml
          this.stepline = sl
        },
        //删除草稿
        delDraft(id){
          let index = this.draftlist.findIndex(item=>item.id==id)
          this.draftlist.splice(index,1)
          window.localStorage.setItem("draftlist",JSON.stringify(this.draftlist))
        },
        //创建菜谱返回按钮
        picback(){
          this.showPic=false
          this.show = false
          this.bgimg = null,
          this.name = null,
          this.recommend = null,
          this.materialist=[
             {
               contentid:null,
               dosage:null,
               id:null,
               name:null,
               ordernum:1,
             }
          ],
          this.materialine = 1,
          this.steplist=[
            {
              contentid:null,
              details:null,
              id:null,
              imageid:null,
              ordernum:1,
              time:0,
            }
          ],
          this.stepline = 1,
          this.tips = null

        }
      },
    created() {
      window.localStorage.setItem("tabId",0)
      if (window.localStorage.getItem('id')) {
        this.navId=window.localStorage.getItem('id')
        let index = this.navList.findIndex(item=>item.id==this.navId)
        this.hasTab = this.navList[index].hasTab
      }
      this.idlist.push(Number(this.navId))
      window.localStorage.setItem('idlist',JSON.stringify(this.idlist))
      if (this.navId==111) {
        this.getHomeRecommendData(this.size)
      }
      if(this.navId=='latest' || this.navId=='hotest'){
        this.getHomeRecipeListData(this.navId,this.size)
      }else if(this.navId!=111){
        this.getHomeContentsBySubClassidData(this.navId,this.size)
      }

      //作品
      let tempworks = JSON.parse(window.localStorage.getItem("works"))
      this.works = tempworks==null?[]:tempworks
      //草稿
      let tempdraftlist = JSON.parse(window.localStorage.getItem("draftlist"))
      this.draftlist = tempdraftlist==null?[]:tempdraftlist
    },

    watch:{
      "navId":function(){
        // this.navId=window.localStorage.getItem('id')
        this.showMeal=false
      },
      "tabIndex":function(){
        this.showMeal=false
      }
    },
    components:{
      MealLists,
      BottomTab
    },
    filters:{
      time(value){
        if (value) {
          let t = new Date(Number(value))
          let y = t.getFullYear()
          let m = t.getMonth()<10?'0'+String(t.getMonth()+1):t.getMonth()+1
          let d = t.getDate()<10?'0'+String(t.getDate()):t.getDate()
          let h = t.getHours()
          let min = t.getMinutes()
          let s = t.getSeconds()
          return `${y}-${m}-${d} ${h}-${min}-${s}`
        }
      }
    }
};
</script>

<style lang="less" scoped>
.home-page {
  width: 100%;
  height: 100%;
  overflow: hidden;

    .top {
      width: 100%;
      height: 55px;

      .top-tools {
        // width: 100%;

        .header {
          width: 100%;
          height: 55px;
          background-color: #f7f7f7;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .add {
            width: 20px;
            height: 20px;
            margin-left: 25px;

            & > img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }

          .search {
            width: 56%;
            height: 20px;
            padding: 5px 20px;
            border-radius: 6px;
            background-color: #eaeaea;

            & > span {
              font-size: 12px;
              color: #999;
            }
          }

          .car {
            width: 20px;
            height: 20px;
            margin-right: 25px;

            & > img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }

    .context {
      width: 100%;
      height: 100%;
      overflow-y: scroll;

      .top-list {
        position: sticky;
        top: -75px;
        z-index: 1000;
        width: 100%;
        height: 90px;
        background-color: #f7f7f7;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;

        .tap {
          width: 100%;
          display: flex;
          justify-content: space-evenly;

          & > li {
            width: 60px;
            height: 70px;
            margin-top: 5px;
            display: flex;
            flex-direction: column;
            align-items: center;

            .img {
              width: 40px;
              height: 40px;
              background-color: #fff;
              border-radius: 12px;
              display: flex;
              justify-content: center;
              align-items: center;

              & > img {
                width: 30px;
                height: 30px;
              }
            }

            & > span {
              display: block;
              margin-top: 10px;
              font-size: 12px;
            }
          }
        }
      }

      .context-tap {
        width: 100%;
        height: 25px;
        padding: 10px 0;
        position: sticky;
        top: 14px;
        z-index: 1000;
        background-color: #fff;

        .c-list {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          margin: 0 auto;
          width: 90%;
          line-height: 25px;
          // margin-left: 5%;
          overflow-x: scroll;
          white-space: nowrap;
          font-size: 0;

          .list-item {
            display: inline-block;
            font-size: 14px;
            color: #999;
            padding-left: 15px;
            overflow: hidden;
            transition: all 0.1s linear;
          }
          .list-item:first-child {
            padding: 0;
          }
          .list-item.active {
            font-size: 16px;
            font-weight: bold;
            color: #333;
          }

          &::-webkit-scrollbar {
            display: none;
          }
        }

        .tap-add-img {
          position: absolute;
          top: 12.5px;
          right: 12px;
          width: 20px;
          height: 20px;
        }
      }
      .tablist{
        width: 100%;
        position: sticky;
        top: 59px;
        background-color: #fff;
        z-index: 1000;
        &>ul{
          padding: 0px 0 15px 0;
          display: flex;
          justify-content: space-evenly;

          &>li{
            font-size: 13px;
            padding: 5px 7px;
            // border: 1px solid #ccc;
            border-radius: 12px;
            background-color: #ccc;
            opacity: 0.7;
            letter-spacing: 0.5px;
          }
          .active{
            background-color: #ffc000;
            color: #fff;
          }
        }
      }
      .meal-list {
        width: 100%;
        margin-top: 5px;
        padding-bottom: 55px;

      }
      &::-webkit-scrollbar {
        display: none;
      }
    }
    .cpCon{
      padding: 10px 20px;
      
      .cptitle{
        font-size: 20px;
        letter-spacing: 0.5px;
        width: 100%;
        text-align: center;
        padding: 15px 0;
        font-style: italic;
        font-weight: bold;
      }
      .cp{
        width: 100%;
        padding-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .picCp{
          width: 155px;
        }
        .videoCp{
          width: 155px;
        }
      }
    }
    .drag{
      width: 100%;
      padding: 10px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: antiquewhite;
      border-radius: 6px;
      &>img{
        width: 45px;
      }
    }
    .pictop{
      padding: 0 12px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 0.5px solid #ccc;
      background-color: #fff;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;

      .picmid{
        font-weight: 700;
      }
      .picright{
        color: #ffc000;
        font-weight: 700;
        font-size: 14px;
      }
    }
    .picContent{
      padding: 15px;

      .bgpic{
        width: 100%;
        height: 195px;
        padding-bottom: 15px;

        .fullImg,
        .emptyImg{
          width: 345px;
          height: 195px;
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
        }
      }
      .cpname{
        padding: 0px 5px 25px 5px;

        .cpntitle{
          font-weight: 700;
          padding-bottom: 15px;
        }
        .cpnInp{
          width: 100%;
          padding:8px 15px;
          box-sizing: border-box;
          font-size: 14px;
          letter-spacing: 0.5px;
          border-radius: 6px;
          border: transparent;
          background-color: #f2f2f2;
        }
        .cparea{
          width: 100%;
          padding: 10px;
          line-height: 20px;
          border-radius: 6px;
          box-sizing: border-box;
          background-color: #f2f2f2;
          font-size: 14px;
          letter-spacing: 0.5px;
          border: transparent;
        }
        .materia{
          width: 100%;
          box-sizing: border-box;
          padding: 5px 15px 0 15px;

          .materiaItem{
            padding: 5px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px dotted #000;

            .leftInp{
              width: 180px;

              &>input{
                width: 100%;
                font-size: 14px;
                padding: 3px 0 3px 5px;
                box-sizing: border-box;
                letter-spacing: 0.3px;
                border: transparent;
              }
            }
            .rightInp{
              width:120px;

              &>input{
                width: 100%;
                font-size: 14px;
                padding: 3px 0 3px 5px;
                box-sizing: border-box;
                letter-spacing: 0.3px;
                border: transparent;
                text-align: right;
              }
            }
          }
        }
        .addline{
          margin-top: 10px;
          display: flex;
          align-items: center;
          justify-content: flex-end;

          .delbtn,
          .addbtn{
            display: flex;
            align-items: center;
            padding: 5px 8px;
            font-size: 13px;
            border-radius: 12px;
            background-color: #fff0db;
            color: #f7981e;
            margin-left: 10px;
            &>img{
              width: 15px;
              height: 15px;
              margin-right: 5px;
            }
          }
        }
        .step{
          padding-top: 10px;

          .stepItem{
            padding-bottom: 15px;

            .stepNum{
              padding: 0 0 15px 10px;
              font-size: 14px;
              font-weight: 700;
            }
            .stepPic{
              padding-bottom: 10px;

              .fullImg,
              .emptyImg{
                width: 335px;
                height: 195px;
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
              }
            }
          }
        }
      }
      .publish{
        width: 100%;
        padding: 10px 0;
        text-align: center;
        color: #fff;
        font-weight: 700;
        background-color: #ffc000;
        border-radius: 8px;
      }
    }
    .drafttop{
      height: 40px;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background-color: #fff;
      padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;

      .draftTitle{
        font-weight: 700;
        letter-spacing: 0.5px;
      }
    }
    .draftCon{
      padding: 10px 15px;

      .draftItem{
        padding: 10px 0;
        display: flex;

        .draftImg{
          width: 110px;
          height: 80px;
          border-radius: 6px;
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          margin-right: 15px;
        }
        .emptyDraft{
          width: 110px;
          height: 80px;
          border-radius: 6px;
          background-color: #ccc;
          margin-right: 20px;
        }
        .draftInfo{
          flex: 1;
          .draftname{
            font-size: 14px;
            font-weight: 700;
            margin: 5px 0 8px 0;
          }
          .addtime{
            font-size: 12px;
          }
          .draftbottom{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 23px;
            font-size: 12px;
            color: #666;
          }
        }
      }
    }
}

  .meal-leave-to {
      opacity: 0;
      transform: translateX(150px);
  }
  .meal-enter {
      opacity: 0;
      transform: translateX(-150PX);
  }
  .meal-leave-active,
  .meal-enter-active {
      transition: all 0.3s linear;
  }
  .van-tabs{
    width: 100%;

   ::v-deep .van-tabs__line{
        display: none;
    }
   ::v-deep .van-tab{
        font-size: 14px;
        padding-left: 0;
    }
   ::v-deep .active {
        font-size: 16px;
        font-weight: bold;
        color: #333;
    }
}
::v-deep .van-tabs__nav--line.van-tabs__nav--complete{
  padding: 0;
}
</style>